<template>
    <div class="ma-content-block lg:flex justify-between p-4">
        <div class="app-container">
            <div class="container-header">
                <div class="container-header-tr">
                    <div>
                        <span class="s1">{{ $t('basics.textPro') }}</span>
                        <a-select
                            style="width: 120px"
                            v-model="form.project_id"
                            :placeholder="$t('basics.textPro')"
                            allow-clear
                        >
                            <a-option
                                v-for="item in projectList"
                                :label="item.project_name"
                                :value="item.id"
                            ></a-option>
                        </a-select>
                    </div>
                    <div>
                        <span class="s1">{{ $t('basics.status') }}</span>
                        <a-select
                            style="width: 120px"
                            v-model="form.status"
                            :placeholder="$t('basics.textStatus')"
                            allow-clear
                        >
                            <a-option
                                :label="$t('basics.zhengchang')"
                                :value="1"
                            ></a-option>
                            <a-option
                                :label="$t('basics.tingyong')"
                                :value="2"
                            ></a-option>
                        </a-select>
                    </div>
                    <div>
                        <a-button
                            class="mr20"
                            type="primary"
                            @click="searchButton"
                        >
                            <icon-search class="mr6" />
                            {{ $t('basics.search') }}
                        </a-button>
                        <a-button type="secondary" @click="resetButton">
                            <icon-refresh class="mr6" />
                            {{ $t('basics.reset') }}
                        </a-button>
                    </div>
                </div>
            </div>
            <div class="container-content">
                <div class="container-content-button mt10 mb10">
                    <a-button
                        class="mr20"
                        type="primary"
                        @click="bandPro(record)"
                    >
                        <icon-plus class="mr6" />
                        {{ $t('basics.add') }}
                    </a-button>
                </div>
                <div class="container-content-table">
                    <a-table
                        :columns="columns"
                        :data="tableList"
                        :loading="loading"
                        :pagination="false"
                    >
                        <template #status="{ record }">
                            <a-popconfirm
                                :content="
                                    $t('basics.confirmEdit') +
                                    (record.status == 1
                                        ? $t('basics.openTxt')
                                        : $t('basics.offTxt')) +
                                    $t('basics.whatTxt')
                                "
                                @ok="statusChange(record)"
                            >
                                <a-switch
                                    v-model="record.status"
                                    :checked-value="1"
                                    :unchecked-value="2"
                                />
                            </a-popconfirm>
                        </template>
                    </a-table>
                    <div
                        class="_crud-footer mt-3 text-right"
                        ref="crudFooterRef"
                    >
                        <a-pagination
                            :total="pageList.total"
                            show-total
                            show-jumper
                            show-page-size
                            @page-size-change="getList"
                            @change="getList"
                            v-model:current="form.page"
                            v-model:page-size="form.pageSize"
                            style="display: inline-flex"
                        />
                    </div>
                </div>
            </div>
            <a-modal
                v-model:visible="visible"
                :render-to-body="false"
                :footer="false"
            >
                <template #title>
                    {{ $t('basics.addNum') }}
                </template>
                <a-form :model="bandForm" ref="bandFormRef" :rules="rules">
                    <a-form-item
                        field="pcnum"
                        :label="$t('basics.computerNum')"
                        label-col-flex="80px"
                        validate-trigger="blur"
                    >
                        <a-input
                            style="width: 100%; margin-right: 20px"
                            v-model="bandForm.pcnum"
                            :placeholder="$t('basics.textNum')"
                            @keyup.enter="handleOk"
                        />
                    </a-form-item>
                    <a-form-item
                        field="project_id"
                        :label="$t('basics.bandPro')"
                        label-col-flex="80px"
                        validate-trigger="change"
                    >
                        <a-select
                            v-model="bandForm.project_id"
                            style="width: 100%; margin-right: 20px"
                            :placeholder="$t('basics.textBandPro')"
                        >
                            <a-option
                                v-for="item in projectList"
                                :label="item.project_name"
                                :value="item.id"
                            ></a-option>
                        </a-select>
                    </a-form-item>
                </a-form>
                <div class="dialog-foot">
                    <a-button
                        style="color: #000"
                        class="mr20"
                        @click="handleCancel"
                        >{{ $t('basics.concel') }}</a-button
                    >
                    <a-button class="mr20" type="primary" @click="handleOk">{{
                        $t('basics.sure')
                    }}</a-button>
                </div>
            </a-modal>
        </div>
    </div>
</template>
<script setup>
import { ref, getCurrentInstance } from 'vue';
import {
    getProjectPcnumList,
    addProjectPcnum,
    updateProjectPcnum
} from '@/api/cloud/script.js';
import { getProjectList } from '@/api/cloud/client.js';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const { proxy } = getCurrentInstance();
const bandFormRef = ref('');
const loading = ref(true);
// 控制对话框
const visible = ref(false);
// 绑定项目表单
const bandForm = ref({});
const columns = [
    {
        title: t('basics.computerNum'),
        dataIndex: 'pcnum',
        minWidth: 150,
        slotName: 'pcnum'
    },
    {
        title: t('basics.proName'),
        dataIndex: 'project_name',
        minWidth: 150,
        slotName: 'project_name'
    },
    {
        title: t('basics.status'),
        dataIndex: 'status',
        minWidth: 150,
        slotName: 'status'
    },
    {
        title: t('basics.createAt'),
        dataIndex: 'created_at',
        minWidth: 200
    },
    {
        title: t('basics.updataAt'),
        dataIndex: 'updated_at',
        minWidth: 200
    }
];

const form = ref({
    project_id: '',
    status: '',
    page: 1,
    pageSize: 10
});
const rules = ref({
    pcnum: [
        {
            required: true,
            message: t('basics.warnNum')
        }
    ],
    project_id: [
        {
            required: true,
            message: t('basics.warnPro')
        }
    ]
});
const tableList = ref([]);
const pageList = ref({
    total: 0
});
// 获取列表数据
const getList = () => {
    getProjectPcnumList(form.value).then((res) => {
        tableList.value = res.data.items;
        pageList.value = res.data.pageInfo;
        loading.value = false;
    });
};
getList();
// 获取项目列表
const projectList = ref([]);
const getProject = () => {
    getProjectList().then((res) => {
        projectList.value = res.data.items;
    });
};

// 搜索
const searchButton = () => {
    getList();
};
const reset = () => {
    form.value.status = '';
    form.value.project_id = '';
    form.value.page = 1;
    form.value.pageSize = 10;
};

const resetButton = () => {
    reset();
    getList();
};
// 状态改变
const statusChange = (row) => {
    let nowStatus = row.status == 1 ? 1 : 2;
    updateProjectPcnum({ id: row.id, status: nowStatus })
        .then((res) => {
            if (res.code == 200) {
                proxy.$message.success(t('basics.updataSecc'));
            }
        })
        .catch((error) => {
            row.status = row.status == 1 ? 2 : 1;
        });
};

const bandPro = () => {
    visible.value = true;
};

const handleOk = () => {
    proxy.$refs['bandFormRef'].validate((valid) => {
        if (!valid) {
            addProjectPcnum(bandForm.value)
                .then((res) => {
                    if (res.code == 200) {
                        getList();
                        visible.value = false;
                    }
                })
                .catch(() => {
                    visible.value = false;
                });
        }
    });
};
const handleCancel = () => {
    visible.value = false;
};

getProject();
</script>
<script>
export default { name: 'cloud:userProject' };
</script>
<style lang="less" scoped>
@import url('@/style/layout.less');
</style>
